<!-- 收银台 -->
<template>
  <s-layout :title="state.title">
    <view class="bg-white ss-modal-box ss-flex-col">
      <view class="modal-header ss-flex-col ss-col-center ss-row-center">
        <view class="money-box ss-m-b-20">
          <text class="money-text">{{ state.totalAmount }}</text>
        </view>
        <view class="time-text">
          <text>{{ payDescText }}</text>
        </view>
	      <view class="menu-item ss-flex-col ss-row-center ss-col-center menu-wallet" @tap="sheep.$router.go('/pages/pay/recharge')">
		      <image class="item-icon" :src="sheep.$url.static('https://img.js.design/assets/img/671f4be217a72048ac76c3fb.png#4415c47657001951c13a4b2fd8fda8b0')" mode="aspectFit"> </image>
	        <view class="menu-title ss-m-t-30">余额充值</view>
	      </view>
      </view>
      <view class="modal-content ss-flex-1">
        <view class="pay-title ss-p-l-30 ss-m-y-30">选择支付方式</view>
        <radio-group @change="onTapPay">
          <label class="pay-type-item" v-for="item in state.payMethods" :key="item.title">
            <view
              class="pay-item ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom"
              :class="{ 'disabled-pay-item': item.disabled }"
              v-if="allowedPayment.includes(item.value)"
            >
              <view class="ss-flex ss-col-center">
                <image
                  class="pay-icon"
                  v-if="item.disabled"
                  :src="sheep.$url.static('/static/img/shop/pay/cod_disabled.png')"
                  mode="aspectFit"
                ></image>
                <image
                  class="pay-icon"
                  v-else
                  :src="sheep.$url.static(item.icon)"
                  mode="aspectFit"
                ></image>
                <text class="pay-title">{{ item.title }}</text>
              </view>
              <view class="check-box ss-flex ss-col-center ss-p-l-10">
                <view class="userInfo-money ss-m-r-10" v-if="item.value == 'money'">
                  余额: {{ userInfo.integral }}元
                </view>
                <view
                  class="userInfo-money ss-m-r-10"
                  v-if="item.value == 'offline' && item.disabled"
                >
                  部分商品不支持
                </view>
                <radio
                  :value="item.value"
                  color="var(--ui-BG-Main)"
                  style="transform: scale(0.8)"
                  :disabled="item.disabled"
                  :checked="state.payment === item.value"
                />
              </view>
            </view>
          </label>
        </radio-group>
	      <mp-html class="detail-notice-selector" :content="state.noticeInfo.noticeContent"></mp-html>
	      <!--<view class="agreement-text ss-flex">
		      <radio-group
				      @change="protocolChange"
				      class="check-box ss-flex ss-col-center ss-p-l-10"
		      >
			      <label class="radio">
				      <radio
						      :checked="state.protocol"
						      color="var(&#45;&#45;ui-BG-Main)"
						      style="transform: scale(0.8)"
				      />
			      </label>
		      </radio-group>
		      <text @click="onProtocol('pay_protocol')">请阅读并同意《付款协议》</text>
	      </view>-->
      </view>
      <!-- 工具 -->
      <view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
        <button v-if="state.payStatus === 0" class="ss-reset-button past-due-btn">
          检测支付环境中
        </button>
        <button v-else-if="state.payStatus === -1" class="ss-reset-button past-due-btn" disabled>
          支付已过期
        </button>
        <button
          v-else
          class="ss-reset-button save-btn"
          @tap="onPay"
          :disabled="state.payStatus !== 1"
          :class="{ 'disabled-btn': state.payStatus !== 1 }"
        >
          立即支付
        </button>
      </view>
    </view>
  </s-layout>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  import {onLoad, onShow} from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import {Base64} from "js-base64";
  import userApi from '@/sheep/api/user';
  import {sh} from "@dcloudio/uni-cli-shared/lib/preprocess/lib/regexrules";

  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 检测支付环境
  const state = reactive({
    orderType: 'goods',
	  couponData: {},
    payment: 'wechat',
	  protocol: false,
    totalAmount: '',
	  rate: '',
	  noticeInfo: {},
	  title: '收银台(订单支付)',
    orderInfo: {},
    payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
    payMethods: [],
    payId: '',
    deyPayId: '',
    picPayId: '',
    rechargePayId: '',
  });

  const allowedPayment = computed(() => {
    if(state.orderType === 'recharge') {
      return sheep.$store('app').platform.recharge_payment
    }
    return sheep.$store('app').platform.payment
    });

  console.log(allowedPayment)

  const payMethods = [
    {
      icon: '/static/img/shop/pay/wechat.png',
      title: '微信支付',
      value: 'wechat',
      disabled: false,
    },
	  /*{
			icon: '/static/img/shop/pay/alipay.png',
			title: '支付宝支付',
			value: 'alipay',
			disabled: false,
		},*/
    {
      icon: '/static/img/shop/pay/wallet.png',
      title: '余额支付',
      value: 'money',
      disabled: false,
    },
    /*{
      icon: '/static/img/shop/pay/apple.png',
      title: 'Apple Pay',
      value: 'apple',
      disabled: false,
    },
    {
      icon: '/static/img/shop/pay/cod.png',
      title: '货到付款',
      value: 'offline',
      disabled: false,
    },*/
  ];

  //勾选协议
  function protocolChange(val) {
	  state.protocol = !state.protocol;
  }

  const onPay = () => {
	  // if (!state.protocol) {
		//   sheep.$helper.toast('请先同意付款协议');
		//   return;
	  // }
    /*if (sheep.$platform.name === 'H5') {
      sheep.$helper.toast('请在微信中打开支付')
      return;
    }*/
    if (state.payment === '') {
      sheep.$helper.toast('请选择支付方式');
      return;
    }
		if (state.orderType === 'rechargePay' && state.payment === 'money') {
			sheep.$helper.toast('充值不支持余额支付');
			return;
		}
	  /*uni.getSetting({
		  withSubscriptions: true,
		  success(res) {
			  console.log('1', res.subscriptionsSetting);
			  if (!res.subscriptionsSetting.mainSwitch) {
				  uni.openSetting({ //打开设置页
					  success(res) {

					  }
				  })
			  } else {
				  uni.requestSubscribeMessage({
					  tmplIds: ['ACfaSLxO5tVKYfFa-JK0tEvUiY-62R11ikQXrM2M36M'],
					  success(res) {

					  },
					  fail(err) {

					  }
				  })
			  }
		  }
	  })*/
    if (state.payment === 'wechat') {
      uni.showModal({
        title: '微信支付',
        content: '确定要支付吗?',
        success: function (res) {
          if (res.confirm) {
            sheep.$platform.pay(state.payment, state.orderType, state.payId, state.totalAmount, state.couponData);
          }
        }
      })
    } else if (state.payment === 'money') {
	    /*userApi.profile().then(res => {
		    console.log(res)
		    if (res.cutRole == 0) {
			    console.log('普通用户')
			    sheep.$helper.toast('暂不支持余额支付，请使用微信支付');
		    } else {
			    console.log('切煤员')
			    if (userInfo.integral < state.totalAmount) {
				    sheep.$helper.toast('余额不足');
				    return;
			    }
			    uni.showModal({
				    title: '余额支付',
				    content: '确定要支付吗?',
				    success: function (res) {
					    if (res.confirm) {
						    sheep.$platform.pay(state.payment, state.orderType, state.payId, state.totalAmount);
					    }
				    }
			    })
		    }
	    })*/
	    // console.log('切煤员')
	    if (userInfo.integral < state.totalAmount) {
		    sheep.$helper.toast('余额不足');
		    return;
	    }
	    uni.showModal({
		    title: '余额支付',
		    content: '确定要支付吗?',
		    success: function (res) {
			    if (res.confirm) {
				    sheep.$platform.pay(state.payment, state.orderType, state.payId, state.totalAmount, state.couponData);
			    }
		    }
	    })
		}
  }

  const payDescText = computed(() => {
    // if (state.payStatus === 2) {
    //   return '该订单已支付';
    // }
    // if (state.payStatus === 1 && state.orderInfo.ext.expired_time !== 0) {
    //   const time = useDurationTime(state.orderInfo.ext.expired_time);
    //   if (time.ms <= 0) {
    //     state.payStatus = -1;
    //     return '';
    //   }
    //   return `剩余支付时间 ${time.h}:${time.m}:${time.s} `;
    // }
    // if (state.payStatus === -2) {
    //   return '未查询到支付单信息';
    // }

    // return `当前汇率 100日元 ≈ ${state.rate}元`;
    return `下单商品时建议充值余额支付`;
  });

  // 查看协议
  function onProtocol(id, title) {
	  sheep.$router.go('/pages/public/richtext', {
		  id,
		  title,
	  });
  }

  function checkPayStatus() {
    if (state.orderInfo.status === 'unpaid') {
      state.payStatus = 1;
      return;
    }
    if (state.orderInfo.status === 'closed') {
      state.payStatus = -1;
      return;
    }
    state.payStatus = 2;
  }

  function onTapPay(e) {
    state.payment = e.detail.value;
  }

  async function setRechargeOrder(id) {
    const { data, error } = await sheep.$api.trade.order(id);
    if (error === 0) {
      state.orderInfo = data;
      state.payMethods = payMethods;
      checkPayStatus();
    } else {
      state.payStatus = -2;
    }
  }

  async function setGoodsOrder(id, options) {
    state.payStatus = 1
    state.payMethods = payMethods.filter(it=>it.value==='wechat' || it.value === 'money')
	  state.orderType = options.orderType;
	  console.log('内部OrderSN', options)
	  state.deyPayId = options.orderSN;
	  state.picPayId = options.orderSN;
	  state.payId = options.orderSN;
  }

  onLoad(async (options) => {
	  await sheep.$store('user').updateUserData();
    const authInfo = sheep.$store('app').authInfo
    if (!sheep.$store('user').userInfo.openId && authInfo) {
      await sheep.$api.user.setWechatInfo(Base64.encode(JSON.stringify(authInfo)))
      sheep.$store('user').userInfo.openId = authInfo.openid
      sheep.$store('app').authInfo = null
    }
    // if (
    //   sheep.$platform.name === 'WechatOfficialAccount' &&
    //   sheep.$platform.os === 'ios' &&
    //   !sheep.$platform.landingPage.includes('pages/pay/index')
    // ) {
    //   location.reload();
    //   return;
    // }
    let id = '';
    if (options.orderSN) {
      id = options.orderSN;
    }
	  if (options.couponData) {
		  let coupdata = JSON.parse(options.couponData);
		  console.log(coupdata, '优惠券数据')
		  state.couponData = coupdata
	  }
	  console.log(options)
	  console.log(state)
		if (options.orderType) {
			let orderType = options.orderType;
			if (orderType === 'memberConsumerDeyPay') {
				state.title = '收银台(运费支付)'
				state.deyPayId = options.orderSN;
			} else if (orderType === 'memberConsumerPicPay') {
				state.title = '收银台(解锁平铺图支付)'
				state.picPayId = options.orderSN;
			} else if (orderType === 'rechargePay') {
				state.title = '收银台(余额充值)'
				state.rechargePayId = options.orderSN
			} else if (orderType === 'commentPay') {
				state.title = '收银台(评论支付)'
				state.payId = options.orderSN
			} else {
				state.title = '收银台(订单支付)'
				state.payId = options.orderSN;
			}
		}
		// 查询字典是否开始微信支付
	  let dictRes = await sheep.$api.order.channelList({ type: 'enable_wechat_pay' });
		console.log(dictRes)
	  if (!sheep.$helper.isRealEmpty(dictRes)) {
			let dict = dictRes[0]
		  if (dict.dictValue == '0') {
				// 关闭微信支付, 剔除wechat
			  state.payMethods = state.payMethods.filter(it=>it.value!=='wechat')
		  }
	  }

	  console.log(payMethods)
	  if (options.id) {
		  id = options.id;
	  }
	  if (options.totalAmount){
		  state.totalAmount = options.totalAmount
	  }
	  if (options.rate){
		  state.rate = options.rate
	  }
	  if (options.type === 'recharge') {
		  state.orderType = 'recharge';
		  // 充值订单
		  setRechargeOrder(id);
	  } else {
		  state.orderType = 'goods';
		  // 商品订单
		  setGoodsOrder(id, options);
	  }

	  const res = await sheep.$api.coupon.detail(18, null);
	  state.noticeInfo = res.data;
  })

  onShow(async (options) => {

	  await sheep.$store('user').updateUserData();
	  const authInfo = sheep.$store('app').authInfo
	  if (!sheep.$store('user').userInfo.openId && authInfo) {
		  await sheep.$api.user.setWechatInfo(Base64.encode(JSON.stringify(authInfo)))
		  sheep.$store('user').userInfo.openId = authInfo.openid
		  sheep.$store('app').authInfo = null
	  }
	  // if (
	  //   sheep.$platform.name === 'WechatOfficialAccount' &&
	  //   sheep.$platform.os === 'ios' &&
	  //   !sheep.$platform.landingPage.includes('pages/pay/index')
	  // ) {
	  //   location.reload();
	  //   return;
	  // }
	  let id = '';
	  if (options.orderSN) {
		  id = options.orderSN;
	  }
	  console.log(options)
	  console.log(state)
	  if (options.orderType) {
		  let orderType = options.orderType;
		  if (orderType === 'memberConsumerDeyPay') {
			  state.title = '收银台(运费支付)'
			  state.deyPayId = options.orderSN;
		  } else if (orderType === 'memberConsumerPicPay') {
			  state.title = '收银台(解锁平铺图支付)'
			  state.picPayId = options.orderSN;
		  } else if (orderType === 'rechargePay') {
			  state.title = '收银台(余额充值)'
			  state.rechargePayId = options.orderSN
		  } else if (orderType === 'commentPay') {
			  state.title = '收银台(评论支付)'
			  state.payId = options.orderSN
		  }  else {
			  state.title = '收银台(订单支付)'
			  state.payId = options.orderSN;
		  }
	  }
	  console.log(payMethods)
	  if (options.id) {
		  id = options.id;
	  }
	  if (options.totalAmount){
		  state.totalAmount = options.totalAmount
	  }
	  if (options.rate){
		  state.rate = options.rate
	  }
	  if (options.type === 'recharge') {
		  state.orderType = 'recharge';
		  // 充值订单
		  setRechargeOrder(id);
	  } else {
		  state.orderType = 'goods';
		  // 商品订单
		  setGoodsOrder(id, options);
	  }

	  const res = await sheep.$api.coupon.detail(18, null);
	  state.noticeInfo = res.data;
  })
</script>

<style lang="scss" scoped>
  .pay-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 26rpx;
  }

  .ss-modal-box {
    // max-height: 1000rpx;

    .modal-header {
      position: relative;
      padding: 60rpx 20rpx 40rpx;


      .money-text {
        color: $red;
        font-size: 46rpx;
        font-weight: bold;
        font-family: OPPOSANS;

        &::before {
          content: '￥';
          font-size: 30rpx;
        }
      }

      .time-text {
        font-size: 26rpx;
        color: $gray-b;
      }

      .close-icon {
        position: absolute;
        top: 10rpx;
        right: 20rpx;
        font-size: 46rpx;
        opacity: 0.2;
      }
    }

    .modal-content {
      overflow-y: auto;

	    .agreement-text{
		    justify-content: center;
		    position: relative;
		    margin-top: 20px;
		    width: calc(100% - 68rpx);
	    }

      .pay-title {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
      }

      .pay-tip {
        font-size: 26rpx;
        color: #bbbbbb;
      }

      .pay-item {
        height: 86rpx;
      }
      .disabled-pay-item {
        .pay-title {
          color: #999999;
        }
      }

      .userInfo-money {
        font-size: 26rpx;
        color: #bbbbbb;
        line-height: normal;
      }
    }

    .save-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
    .disabled-btn {
      background: #e5e5e5;
      color: #999999;
    }

    .past-due-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background-color: #999;
      color: #fff;
    }
  }
  .menu-item {
	  height: 160rpx;

	  .menu-title {
		  font-size: 24rpx;
		  line-height: 24rpx;
		  color: #333333;
	  }

	  .item-icon {
		  width: 44rpx;
		  height: 44rpx;
	  }

	  .value-box {
		  height: 50rpx;
		  text-align: center;

		  .value-text {
			  font-size: 28rpx;
			  color: #000000;
			  line-height: 28rpx;
			  vertical-align: text-bottom;
			  font-family: OPPOSANS;
		  }

		  .unit-text {
			  font-size: 16rpx;
			  color: #000000;
			  line-height: 16rpx;
		  }
	  }
  }
</style>
